<template>
  <div class="internetChannelSkillWrap">
    <div class="title">{{title}}</div>
     <search
      class="search"
      :inputTitle="$t('callServiceSkillGroup.callServiceSkillGroup2')"
      :isReloadIvr="false"
      :showAdvSearch="false"
      @add="addSkillGroup"
      @refresh="refresh"
      @search="searchByName"
      @inputChange="inputChangeSkillName"
      @turnPage="turnPage"
      :currentPage="currentPage"
      :count="count"
      :pageSize="10">
    </search>
    <diyTable :tableHeader="tableHeader" :tableData="tableData" @updata="updata" @del="del"></diyTable>
		<el-drawer :visible="isShowAddOrEdit" :before-close="close" :title="titleArr[1]">
				<addInternetChannelSkillGroup v-if="isShowAddOrEdit" :skillInfo="skillInfo" @refresh="refresh"  @back="close" style="max-height: calc(100vh - 76px)"></addInternetChannelSkillGroup>
		</el-drawer>
  </div>
</template>
<script>
  import configCompositionTwoWindowStyle from '@components/ui-modules/config/configCompositionTwoWindowStyle'
	import search from '@components/business-modules/config/channelConfig/base/search.vue'
	import diyTable from '@components/business-modules/config/channelConfig/base/diyTable'
  import addInternetChannelSkillGroup from '@components/business-modules/config/channelConfig/channelSkillGroupDirectory/internetChannelSkillGroup/addInternetChannelSkillGroup.vue'
  export default {
    data () {
      return {
        flag: this.$store.getters.isEcommerce ? true : false, // 是否是电商平台
        count: 0,
        agents: [],
        currentPage: 1,    //   当前页
        tableHeader: [
          {prop: 'DisplayName', label: this.$t('callServiceSkillGroup.callServiceSkillGroup3')},
          {prop: 'Exten', label: this.$t('callServiceSkillGroup.callServiceSkillGroup10')},
          {prop: 'UpdateTime', label:  this.$t('config.channel.lastUpdateTime')},
          {prop: 'UpdateAgent', label: this.$t('callServiceSkillGroup.callServiceSkillGroup4')},
          {prop: '', label: this.$t('public.operate')}
        ],                        //   自定义 表头
        tableData: [],           //  表格数据
        tableLoading: false,      //   表格  loading
        isShowAddOrEdit: false,   //   右侧  新建或修改 显隐
        isLoadingAddOrEdit: false,
        titleArr: [this.$t('configLazyLoad.agentConfig.netGroup'), this.$t('callServiceSkillGroup.callServiceSkillGroup5')],
        inputConditionSkillName: '',
        skillInfo: {},
        title: this.$t('configLazyLoad.skillGroup.title')
      }
    },
    components: {
      configCompositionTwoWindowStyle,
      search,
      diyTable,
      addInternetChannelSkillGroup
    },
    methods: {
      close (done) {
				this.isShowAddOrEdit = false
				done && done()
      },
      addSkillGroup () {
        this.isShowAddOrEdit = true
        this.titleArr.splice(1, 1, this.$t('callServiceSkillGroup.callServiceSkillGroup5'))
        this.skillInfo = {}
      },
      refresh () {
        this.currentPage = 1
        this.inputConditionSkillName = ''
        this.search()
      },
      searchByName (val) {
        this.inputConditionSkillName = val
        this.currentPage = 1
        this.search()
      },
      inputChangeSkillName (val) {
        this.inputConditionSkillName = val
      },
      search () {
        this.tableLoading = true
        this.$store.dispatch('queryEmailQueueForSkill', {page: this.currentPage, limit: 10, DisplayName: this.inputConditionSkillName, Type: 'im'}).then((res) => {
          this.tableLoading = false
          if (res.success) {
            this.tableData = res.list
            this.count = res.count
            this.isShowAddOrEdit = false
          }
        })
      },
      turnPage (val) {
        this.currentPage = val
        this.search()
      },
      updata (val) {
        let id = val._id
        this.isLoadingAddOrEdit = true
        this.$store.dispatch('queryEmailQueueByIdForSkill', {_id: id}).then(res => {
          if (res.success) {
            this.isLoadingAddOrEdit = false
            this.isShowAddOrEdit = true
            this.titleArr.splice(1, 1, this.$t('callServiceSkillGroup.callServiceSkillGroup6'))
            this.skillInfo = res.mailQueue
          }
        })
      },
      del (val) {
        let data = {}
        data._id = val._id
        this.$confirm(this.$t('configLazyLoad.skillGroup.tips1'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('deleteEmailQueueForSkill', data).then(res => {
            if (res.success) {
              this.refresh()
              this.$message({
                message: this.$t('configLazyLoad.skillGroup.tips2'),
                type: 'success'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('public.cancel')
          })
        })
      }
    },
    beforeMount () {
      this.search()
      if (this.flag) {
        this.title = this.$t('configLazyLoad.skillGroup.tips3')
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .internetChannelSkillWrap
    padding 0 20px
    .title
      color $c-prompt
      height 30px
      line-height 30px
      padding 3px 0
      border-bottom 1px solid $c-border1
    .search
      border-left 1px solid $c-border1
      border-right 1px solid $c-border1
</style>